<template>
  <a-modal v-model:visible="modalVisible" @ok="handleOk" @cancel="handleCancel">
    <template #title>
      {{ props.data.id ? '新增储存盘' : '修改储存盘' }}
    </template>
    <div>
      <a-form ref="FormData" layout="vertical" :model="form" auto-label-width>
        <a-form-item field="diskName" label="云盘名称:" required>
          <a-input v-model="form.diskName" allow-clear></a-input>
        </a-form-item>
        <!-- <a-form-item field="diskSpace" label="云盘空间(GB):" required>
          <a-input-number v-model="form.diskSpace" />
        </a-form-item> -->
        <a-form-item field="remark" label="备注:" required>
          <a-input v-model="form.remark" allow-clear></a-input>
        </a-form-item>
        <a-form-item field="type" label="指定业务:" required>
          <a-select
            :style="{ width: '320px' }"
            v-model="form.type"
            placeholder="Please select ..."
          >
            <a-option :value="1">组织</a-option>
            <a-option :value="2">人事</a-option>
            <a-option :value="3">考勤</a-option>
            <a-option :value="4">绩效</a-option>
            <a-option :value="5">薪酬</a-option>
            <a-option :value="6">合同</a-option>
            <a-option :value="7">审批</a-option>
          </a-select>
        </a-form-item>
        <!-- <a-form-item
          field="uploadFileRate"
          label="文件上传速率(单位：Mb):"
          required
        >
          <a-input disabled v-model="form.uploadFileRate" allow-clear></a-input>
        </a-form-item>
        <a-form-item field="maxMemory" label="最大内存(单位 GB):" required>
          <a-input-number
            v-model="form.maxMemory"
            :max="100"
            :min="1"
            allow-clear
          ></a-input-number>
        </a-form-item>
        <a-form-item
          v-if="form.id"
          v-model="form.usedMemory"
          label="已使用内存(单位 MB):"
          required
        >
          <a-input-number
            disabled
            v-model="form.number"
            allow-clear
          ></a-input-number>
        </a-form-item>
        <a-form-item field="status" label="储存盘状态:" required>
          <a-switch
            v-model="form.status"
            :checked-value="1"
            :unchecked-value="2"
          />
        </a-form-item> -->
      </a-form>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { cloneDeep } from 'lodash';
import { reactive, computed, ref, watchEffect } from 'vue';

const props = withDefaults(
  defineProps<{
    visible: boolean;
    data: any;
  }>(),
  {
    visible: false
  }
);

const emit = defineEmits(['update:visible', 'addDocumentEmit']);
const FormData = ref();
// 判断用户是否显示弹出框
const modalVisible = computed({
  get() {
    return props.visible;
  },
  set(visible: boolean) {
    emit('update:visible', visible);
  }
});

let form = reactive({
  id: undefined,
  diskName: '',
  diskSpace: undefined,
  remark: '',
  type: undefined
});

const rules = reactive({});

// 确定
const handleOk = async () => {
  FormData.value.validate((res) => {
    if (!res) {
      emit('addDocumentEmit', form);
      modalVisible.value = false;
    }
  });
};

// 取消
const handleCancel = () => {
  modalVisible.value = false;
};

onMounted(() => {
  if (modalVisible.value) {
    if (!props.data.id) {
      form = {
        id: undefined,
        diskName: '',
        diskSpace: undefined,
        remark: '',
        type: undefined
      };
    } else {
      form = cloneDeep(props.data);
    }
  }
});
</script>

<style scoped lang="less"></style>
